<template>
  <div>
    <div>=========================================</div>
    <h1>Vue3中，ref的使用</h1>
    <div>abc：{{ abc }}</div>
    <h5 ref="h5Ref">h5标签</h5>
    <TestView ref="testViewRef"></TestView>
    <el-button type="primary" @click="getH5">获取打印H5标签元素</el-button>
    <el-button type="primary" @click="getCom">获取打印组件实例</el-button>
    <div>=========================================</div>
  </div>
</template>

<!-- 安装vite-plugin-vue-setup-extend插件让<script setup>标签</script>可以直接自定义组件名 -->
<script setup lang="ts" name="RefView">
import { ref } from "vue"
import TestView from "./TestView.vue"

// 1.声明响应式变量（ref可以定义基本数据类型的响应式数据，也可以定义复杂数据类型的响应式数据）
const abc = ref(99)
const h5Ref = ref()
const testViewRef = ref()

// 2.普通标签加上ref，通过ref获取到的是该标签元素
const getH5 = () => {
  console.log("通过ref获取到指定h5标签元素", h5Ref.value)
}
// 3.组件标签加上ref，通过ref获取到的是组件的实例，且实例中会有该组件实例暴露出来的内容
const getCom = () => {
  console.log("通过ref获取到TestView组件的实例，且实例中会有该组件实例暴露出来的内容", testViewRef.value)
}
</script>

<style scoped></style>
